<template>
  <div class="page-container">
    <ac-table
      ref="dataTable"
      pkName="id"
      :filters="filters"
      :filterFields="filterFields"
      :columns="columns"
      @handleTableOperator="handleTableOperator"
    ></ac-table>
  </div>

  <!--新增编辑界面-->
  <el-dialog
    :title="dialogTitle"
    width="600px"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <div
      class="dialog-box"
      v-loading="dialogLoading"
      element-loading-text="数据加载中..."
    >
      <el-form
        ref="dataForm"
        label-width="120px"
        label-position="right"
        :model="formData"
        :rules="rules"
      >
        <el-row>
          <el-col :span="22">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="显示名称" prop="showName">
              <el-input v-model="formData.showName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="类型" prop="type">
              <ac-buttons v-model="formData.type" options='表格按钮,表单按钮,通用按钮' />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="数据数量" prop="dataVolume">
              <ac-buttons v-model="formData.dataVolume" options='不限,单条,多条' />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="显示位置" prop="showPosition">
              <ac-checkbox v-model="formData.showPosition" options='顶部,行内,底部' />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="按钮图标" prop="iconId">
              <ac-icon-select v-model="formData.iconId" iconSize="22" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="字体颜色" prop="fontColor">
              <el-color-picker
                v-model="formData.fontColor"
                show-alpha
                :predefine="predefineColors"
                color-format="hex"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="背景颜色" prop="backgroundColor">
              <el-color-picker
                v-model="formData.backgroundColor"
                show-alpha
                :predefine="predefineColors"
                color-format="hex"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="边框颜色" prop="borderColor">
              <el-color-picker
                v-model="formData.borderColor"
                show-alpha
                :predefine="predefineColors"
                color-format="hex"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="提交确认语" prop="submitPrompt">
              <el-input v-model="formData.submitPrompt" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="排序" prop="ordinal">
              <ac-number v-model="formData.ordinal" :point="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="dialogVisible=false"
      >取消</el-button>
      <el-button
        size="default"
        type="primary"
        :loading="editLoading"
        @click="submitForm"
      >提交
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import api from "@/http/api";
import { ElMessage, ElMessageBox } from "element-plus";

const filters = ref({
  name: ''
});
const filterFields = ref([
  {prop: "name", label: "名称"}
]);

const columns = ref([
  {prop: "name", label: "名称", minWidth: 100},
  {prop: "showName", label: "显示名称", minWidth: 100},
  {prop: "type", label: "类型", width: 90},
  {prop: "dataVolume", label: "数据数量", width: 100},
  {prop: "showPosition", label: "显示位置", width: 100},
  {prop: "iconId", label: "按钮图标", color: '#333', minWidth: 50, width: "100%", height: "100%", type: 'icon', sortable: false},
  {prop: "fontColor", label: "字体颜色", align: 'center', type: 'color', width: 80, sortable: false},
  {prop: "backgroundColor", label: "背景颜色", type: 'color', width: 80, sortable: false},
  {prop: "borderColor", label: "边框颜色", type: 'color', width: 80, sortable: false},
  {prop: "submitPrompt", label: "提交确认语", minWidth: 100, sortable: false},
  {prop: "ordinal", label: "排序", width: 80, type: 'number'},
  {prop: "updateTime", label: "更新时间", width: 160, onlyShow: true, type: "datetime"},
]);

const rules = ref({
  name: [
    {required: true, message: '请输入名称', trigger: ['change', 'blur']},
    {max: 100, message: '长度必须小于等于 50 个字符！', trigger: ['change', 'blur']}
  ],
  showName: [
    {required: true, message: '请输入显示名称', trigger: ['change', 'blur']},
    {max: 100, message: '长度必须小于等于 50 个字符！', trigger: ['change', 'blur']}
  ],
  submitPrompt: [
    {max: 100, message: '长度必须小于等于 100 个字符！', trigger: ['change', 'blur']}
  ],
  ordinal: [
    {required: true, message: '请输入排序', trigger: ['change', 'blur']}
  ],
});

const dataTable = ref();
const dialogTitle = ref('');
const dialogVisible = ref(false);
const dialogLoading = ref(false);
const editLoading = ref(false);
const dataForm = ref();
const formData = ref({});
const defaultFormData = ref({
  type: '通用按钮',
  dataVolume: '不限',
  showPosition: '顶部',
  fontColor: '#ffffff',
  backgroundColor: '#409eff',
  borderColor: '#409eff',
  ordinal: 10
});
const predefineColors = ref([
  '#409EFF',
  '#67C23A',
  '#E6A23C',
  '#F56C6C',
  '#909399',
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  '#FF7800',
]);

const handleTableOperator = (button, row) => {
  dialogTitle.value = button.name
  formData.value = Object.assign({}, defaultFormData.value);

  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
  } else if (button.buttonType === 'add') {
    formData.value = Object.assign({},
      defaultFormData.value,
      {button: button});
  } else {
    formData.value = Object.assign({button: button}, defaultFormData.value);
  }

  dialogVisible.value = true
};

const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          editLoading.value = false;
          dataTable.value.findPage();
        }).catch(() => {
          editLoading.value = false;
        });
      }).catch(()=>{});
    }
  });
};
</script>